import { useStore } from '@renderer/store/useStore'
import { Alert } from 'antd'
import { useEffect } from 'react'

function Error() {
  const error = useStore((state) => state.error)
  const setError = useStore((state) => state.setError)

  // 2秒后清除错误提示,注意useEffect必须放在顶层,也不能放在代码块里
  useEffect(() => {
    const id = setTimeout(() => setError(''), 6000)
    return () => clearTimeout(id)
  }, [error])

  // 没有错误，什么也不做
  if (!error) return <></>
  // 有错误，给出错误提示
  return (
    <main className="absolute top-0 w-[calc(100%-24px)] z-10">
      <Alert message={error} type="error" showIcon />
    </main>
  )
}

export default Error
